<template>
  <div class="layout-padding">
    <el-tabs v-model="activeName" type="border-card" class="card-tabs h-full" @tab-click="handleClick">
      <el-tab-pane :label="$t('inputOutputDetal.tcDetal')" name="first" class="h-full">
<!--        <div class="layout-padding-auto ">-->
<!--          <el-form :model="state.queryForm" ref="queryRef" :inline="true">-->
<!--            <el-form-item :label="$t('inputoutput.mesProduceDate')" prop="mesProduceDate">-->
<!--              <div class="block">-->
<!--                <el-date-picker v-model="mesProduceDate" clearable type="daterange" unlink-panels range-separator="To"-->
<!--                  start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" />-->
<!--              </div>-->
<!--            </el-form-item>-->

<!--            <el-form-item :label="$t('inputoutput.processCode')" prop="processCode">-->
<!--              <el-select v-model="state.queryForm.processCode" placeholder="Select" filterable style="width: 160px">-->
<!--                <el-option v-for="item in processCodeOptions" :key="item.processCode" :label="item.processCode"-->
<!--                  :value="item.processCode" />-->
<!--              </el-select>-->
<!--            </el-form-item>-->

<!--            <el-form-item>-->
<!--              <el-button type="primary" icon="search" @click="query">{{ $t('so.query') }}</el-button>-->
<!--              <el-button icon="refresh" @click="resetQuery">{{ $t('so.reset') }}</el-button>-->
<!--              <el-button type="success" icon="Download" plain @click="exportCard">{{ $t('inputOutputDetal.daochu') }}</el-button>-->
<!--            </el-form-item>-->
<!--            <br />-->
<!--            <div style="margin-bottom: 10px">-->
<!--              <span style="font-size: 14px;font-weight: 600;color: #303133">{{$t('inputOutputDetal.hgpSum')}}：{{ totalQualifiedQty||0 }}</span>-->
<!--              <br />-->
<!--              <span style="font-size: 14px;font-weight: 600;color: #303133">{{$t('inputOutputDetal.cpSum')}}：{{ totalQty||0 }}</span>-->
<!--            </div>-->
<!--          </el-form>-->
<!--          <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border-->
<!--            style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe-->
<!--            :header-cell-style="tableStyle.headerCellStyle" ref="tableRef">-->
<!--            <el-table-column type="index" label="#" width="80" />-->
<!--            <el-table-column prop="dateTime" :label="$t('inputoutput.mesProduceDate')" show-overflow-tooltip/>-->
<!--            <el-table-column prop="processName" :label="$t('inputoutput.processName')" show-overflow-tooltip/>-->
<!--            <el-table-column prop="processCode" :label="$t('inputoutput.processCode')" show-overflow-tooltip/>-->
<!--            <el-table-column prop="qualifiedQty" :label="$t('inputOutputDetal.hgpQty')" show-overflow-tooltip>-->
<!--              <template #default="scope">-->
<!--                <el-tag type="success" effect="plain">-->
<!--                  {{ scope.row.qualifiedQty }}-->
<!--                </el-tag>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="errorQty" :label="$t('inputOutputDetal.cpQty')" show-overflow-tooltip>-->
<!--              <template #default="scope">-->
<!--                <el-tag type="danger" effect="plain">-->
<!--                  {{ scope.row.errorQty }}-->
<!--                </el-tag>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->

<!--          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />-->
<!--        </div>-->
        <consumeRecord/>
      </el-tab-pane>
      <el-tab-pane  :label="$t('inputOutputDetal.trDetal')" name="second" class="h-full">
        <inputRecord />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { reactive, ref } from 'vue';
import { TabsPaneContext } from 'element-plus';
import {
  getAllProcess,
  getOutputRecord,
  GetOutputRecordTotalQty,
  GetOutputRecordSum,
  GetOutputRecordSumTotalQty
} from '/@/api/platform/report/inputoutput';
import { useI18n } from 'vue-i18n';


const { t } = useI18n();
const totalQty = ref();
// 引入组件
const inputRecord = defineAsyncComponent(() => import('./input.vue'));
const consumeRecord = defineAsyncComponent(() => import('./consume.vue'));

const activeName = ref('first');
const getYMD = (date: any) => {
  // 获取年份
  const year = date?.getFullYear();

  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date?.getMonth() + 1)?.padStart(2, '0');

  // 获取日期
  const day = String(date?.getDate())?.padStart(2, '0');

  // 拼接成 yyyy-MM-dd 格式的字符串
  const formattedDate = `${year}-${month}-${day}`;

  return formattedDate || '';
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const mesProduceDate = ref([endDate, today]);
// const produceEndTime = ref([endDate, today]);
// 搜索变量
const queryRef = ref();
const tableRef = ref();
const totalQualifiedQty = ref()
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
//打印机列表
const processCodeOptions = ref();
// 初始化数据
onMounted(() => {
  getAllProcess({}).then((res) => {
    processCodeOptions.value = res.data;
  });
});
//早班晚班选项
// const shiftCodeOptions = ref([
//   { label: 'All', value: '' },
//   { label: t("inputoutput.MorningShift"), value: 'MorningShift' },
//   { label: t("inputoutput.EveningShift"), value: 'EveningShift' },
// ]);
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    StartDate: mesProduceDate.value ? getYMD(mesProduceDate.value[0]) : '',
    EndDate: mesProduceDate.value ? getYMD(mesProduceDate.value[1]) : '',
    // StartTime: produceEndTime.value ? getYMD(produceEndTime.value[0]) : '',
    // EndTime: produceEndTime.value ? getYMD(produceEndTime.value[1]) : '',
  },
  pageList: GetOutputRecordSum,
});
// 清空搜索条件
const resetQuery = () => {
  //清空下拉框
  state.queryForm.processCode = '';
  state.queryForm.shiftCode = '';


  const now = new Date();
  const startDate = new Date(now.getFullYear(), now.getMonth(), 1); // 本月开始日期
  const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0); // 本月结束日期

  state.queryForm.StartDate = startDate.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
  state.queryForm.EndDate = endDate.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD

  mesProduceDate.value = [startDate,endDate];
  // produceEndTime.value = [endDate, today];
  getDataList(false);
  GetOutputRecordSumTotalQty(state.queryForm).then((res) => {
    totalQty.value = res.data.totalErrorQty;
    totalQualifiedQty.value = res.data.totalQualifiedQty
  });
};
//搜索
const query = () => {
  state.queryForm.StartDate = mesProduceDate.value?.length > 0 ? getYMD(mesProduceDate.value[0]) : '';
  state.queryForm.EndDate = mesProduceDate.value?.length > 0  ? getYMD(mesProduceDate.value[1]) : '';
  // state.queryForm.StartTime = produceEndTime.value ? getYMD(produceEndTime.value[0]) : '';
  // state.queryForm.EndTime = produceEndTime.value ? getYMD(produceEndTime.value[1]) : '';
  GetOutputRecordSumTotalQty(state.queryForm).then((res) => {
    totalQty.value = res.data.totalErrorQty;
    totalQualifiedQty.value = res.data.totalQualifiedQty
  });
  getDataList();
};
const exportCard = () => {
  downBlobFile('/report/inputOutput/ExportProductOutput', {
    "StartDate": state.queryForm.StartDate||'',
    "EndDate": state.queryForm.EndDate||'',
    "ProcessCode": state.queryForm.processCode||''
  }, 'ProductOutput.xlsx');
}
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle,downBlobFile } = useTable(state);

</script>
<style>
/*.card-tabs>.el-tabs__content {
	padding: 2px;
}*/
</style>
